<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      #app{
        width: 100px;
        overflow: hidden;
      }
      .box{
        background-color: red;
        width: 100px;
        position: absolute;
        left:0;top:100px;
      }
      .fade-enter{
        transform: translateX(-100px);
      }
      .fade-enter-active{
        transition: all 1s;
      }
      .fade-enter-to{
        transform: translateX(0);
      }
      
      .fade-leave{
        transform: translateX(0);
      }
      .fade-leave-active{
        transition: all 1s;
      }
      .fade-leave-to{
        transform: translateX(100px);
      }
    </style>
	</head>
	<body>
    <div id="app">
      <transition name="fade">
        <p v-if="show" class="box" key="1">文字1</p>
        <p v-else class="box" key="2">文字2</p>
      </transition>
      <button @click="show = !show">按钮</button>
    </div>
	</body>
  <script src="../vue.js"></script>
  <script type="text/javascript">
    
    new Vue({
      el:"#app",
      data:{
        show: true
      }
    })
    
  </script>
</html>
